<template>
  <div>

    <div v-if='data.id>0' @click='changepid(data.id)' :class="pid == data.id?'active':''" :id='data.id'>
      {{ data.name }}
    </div>
    <ul v-if='data.son && data.son.length>0'>
      <subscate v-for='son in data.son' :data='son' :key='son.id'/>
    </ul>


  </div>
</template>

<script>
import bus from "../course/bus";

export default {
  props: ['data'],
  name: "subscate",
  data() {
    return {
      pid: 0
    }
  },
  methods: {
    changepid(id) {
      this.pid = id
      // console.log(id)
      localStorage.setItem('pid', id)
      bus.$emit('pid', id)

      //删除所有颜色
      let acvlist = document.getElementsByClassName('active')
      for (var i = 0; i < acvlist.length; i++) {
        acvlist[i].classList.remove('active')
      }
      //点击当前的配颜色
      let acvid = document.getElementById(id)
      acvid.classList.add('active')

    }
  },
  mounted() {
    localStorage.setItem('pid', '')
  }
}
</script>

<style scoped>
.active {
  background-color: aqua;

}

ul {
  padding-left: 5rem;
}

</style>
